$(function(){

    let layerindex;
    function initArticle(){
        axios({
            method:'GET',
            url:'/my/article/cates',

        }).then((result) => {
            if(result.data.status!==0){
                return layui.layer.msg(result.data.message);
            }
            // 渲染页面
            let arr = []
            result.data.data.forEach(element => {
                arr.push(`
                    <tr>
                    <td>${element.Id}</td>
                    <td>${element.name}</td>
                    <td>${element.alias}</td>
                    <td>
                        <button data-id='${element.Id}'  type="button" class="layui-btn layui-btn-sm editbtn">编辑</button>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm delbtn">删除</button>
                    </td>
                
                `)
            });
            $('.layui-table tbody').empty().html(arr.join(''))

        })
            
        
    }
    initArticle()

    $('#addcata').click(function(){
        layerindex =  layer.open({
            type: 1,
            title: '添加文章类别',
          area: ['500px', '300px'],
        content: `    <form class="layui-form" action="" id="formsub">
        <div class="layui-form-item">
          <label class="layui-form-label">name</label>
          <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">alias</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
    </form>`
          });     
              
    })

    //添加提交
    $('body').on('submit','#formsub',function(e){
        e.preventDefault()
        axios({
            method:'POST',
            url:'/my/article/addcates',
            data:$(this).serialize()
        }).then(res=>{
            if(res.data.status!==0){
                return layui.layer.msg(res.data.message)
            }
            layui.layer.msg('提交表单数据成功')
            initArticle()
            layer.close(layerindex)
        })

    })

    //打开编辑
    $('tbody').on('click','.editbtn',function(){
        layerindex =  layer.open({
            type: 1,
            title: '修改文章类别',
          area: ['500px', '300px'],
        content: `    <form class="layui-form" lay-filter="formmodify" id="formmodifysubmit" >
        <!-- 隐藏域 填充id值 -->
            <input type="text", name="Id" value='' placeholder='调试完后隐藏该输入框'>
        <div class="layui-form-item">
          <label class="layui-form-label">name</label>
          <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">alias</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
    </form>`
          })
          let id = $(this).attr('data-Id')
        //   alert(id)

        //通过id获取数据
          axios({
              method:'GET',
            //   url:'/my/article/cates/'+id
              url:`/my/article/cates/${id}`,
          }).then(res=>{
              if(res.data.status!==0){
                  return layui.layer.msg(res.data.message)
              }
              layui.form.val('formmodify',res.data.data)
              console.log(res.data.data);
          })

    })

    //编辑提交
    $('body').on('submit','#formmodifysubmit',function(e){
        e.preventDefault()
        axios({
            method:'POST',
            url:'/my/article/updatecate',
            data: $(this).serialize()
        }).then(res=>{
            if(res.data.status!==0){
                console.log(res);
                return layui.layer.msg(res.data.message)
            }
            layui.layer.msg('提交表单数据成功')
            initArticle()
            layer.close(layerindex)
        })

    })

    // 删除功能实现
    $('body').on('click',".delbtn",function(){
        let id = $(this).siblings('.editbtn').attr('data-id')
        // alert(id)
        layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
            //do something
            axios({
                // GET可以省略不写
                method:'GET',
                url:'/my/article/deletecate/'+id,

            }
            ).then(res=>{
                if(res.data.status!==0){
                    return layui.layer.msg(res.data.message)
                }
                layui.layer.msg('删除成功')
                initArticle()
            })
            layer.close(index);
          });
    })
});